<template>
    <TechPopup :class="`tech-shop-pay-type ${mode} ${styleMode}`" title="支付方式" v-model="showSelect" @close="close">
        <RadioGroup v-model="selectVal">
            <Radio class="payment-item" :name="cardTypeVal">
                <div class="payment-content">
                    <div class="payment-icon vip-card"></div>
                    <div class="payment-info">
                        <div class="payment-name title-color">会员卡</div>
                    </div>
                </div>
                <MiniIcon
                    class="check-icon"
                    :name="selectVal === cardTypeVal ? 'checkfill' : 'checkcircle'"
                    :size="25"
                    :mode="mode"
                    :theme="selectVal === cardTypeVal ? theme : '#7D7D83'"
                    :styleMode="styleMode"
                />
            </Radio>
            <Radio v-if="platform.isWechat || platform.isWechatMini || platform.isToutiaoMini" class="payment-item" :name="wechatTypeVal">
                <div class="payment-content">
                    <div class="payment-icon">
                        <TechIcon name="wechat-pay" color="#65BA69" :size="25" />
                    </div>
                    <div class="payment-info">
                        <div class="payment-name title-color">微信支付</div>
                    </div>
                </div>
                <MiniIcon
                    class="check-icon"
                    :name="selectVal === wechatTypeVal ? 'checkfill' : 'checkcircle'"
                    :size="25"
                    :mode="mode"
                    :theme="selectVal === wechatTypeVal ? theme : '#7D7D83'"
                    :styleMode="styleMode"
                />
            </Radio>
            <Radio v-if="platform.isAlipay || platform.isToutiaoMini" class="payment-item" :name="alipayTypeVal">
                <div class="payment-content">
                    <div class="payment-icon">
                        <TechIcon name="alipay-pay" color="#00A1E9" :size="25" />
                    </div>
                    <div class="payment-info">
                        <div class="payment-name title-color">支付宝</div>
                    </div>
                </div>
                <MiniIcon
                    class="check-icon"
                    :name="selectVal === alipayTypeVal ? 'checkfill' : 'checkcircle'"
                    :size="25"
                    :mode="mode"
                    :theme="selectVal === alipayTypeVal ? theme : '#7D7D83'"
                    :styleMode="styleMode"
                />
            </Radio>
        </RadioGroup>
        <div class="btn-el" slot="button">
            <Button class="tech-btn" :style="themeBackround" :round="buttonRound" size="large" @click="ensure">确定</Button>
        </div>
    </TechPopup>
</template>

<script>
import { RadioGroup, Radio, Button } from 'vant';
import { mapState, mapActions } from 'vuex';
import { TechPopup, TechIcon, MiniIcon } from '@components/base';
import { platformTruth } from '@common/environment';
import { SHOP_PAY_TYPE } from '@constants/shop';
import { PAY_TYPE_MEMBERCARD, PAY_TYPE_WECHAT, PAY_TYPE_ALIPAY } from '@constants/pay';
import ModeMixin from '@common/mixin';

export default {
    name: 'ShopPayType', // 支付方式选择
    mixins: [ModeMixin],
    components: {
        TechPopup,
        RadioGroup,
        Radio,
        Button,
        TechIcon,
        MiniIcon,
    },
    props: {
        defaultVal: {
            type: Number,
            default: SHOP_PAY_TYPE.card,
        },
        cardInfo: {
            type: Object,
            default() {
                return {
                    gradeName: '会员卡',
                    balance: 0
                };
            },
        },
        isLow: Boolean,
    },
    watch: {
        defaultVal(val) {
            if (val) {
                this.selectVal = val;
            }
        },
    },
    data() {
        return {
            showSelect: false,
            selectVal: SHOP_PAY_TYPE.card,
            platform: platformTruth(),
            cardTypeVal: SHOP_PAY_TYPE.card,
            wechatTypeVal: SHOP_PAY_TYPE.wechat,
            alipayTypeVal: SHOP_PAY_TYPE.alipay,
        };
    },
    methods: {
        show() {
            this.showSelect = true;
            this.selectVal = this.$props.defaultVal;
        },
        close() {
            this.showSelect = false;
        },
        ensure() {
            // 设置支付方式
            this.$emit('ensure', this.selectVal);
            // 关闭
            this.close();
        },
    },
};
</script>

<style lang="less">
.tech-shop-pay-type {
    .style-mode-top();
    .popup-content {
        padding: 0 !important;
    }
    &.black {
        .payment-item {
            .border-line(rgba(125, 125, 131, 0.2), 0, 0);
        }
    }
    .payment-item {
        position: relative;
        .p(@gap);
        .border-line();
        &::after {
            left: 0;
            right: 0;
        }
        .van-radio__label {
            .m-l(0);
        }
        .van-radio__label {
            width: 100%;
            height: 100%;
            position: relative;
            .check-icon {
                position: absolute;
                right: 0;
                top: 50%;
                .m-t(-12px);
            }
        }
        .van-radio__input {
            position: absolute;
            right: @gap-md;
            .p(@gap-sm);
            top: 50%;
            .m-t(-@gap-md);
            .van-icon {
                display: none;
            }
        }
        .payment-content {
            .flex();
            align-items: center;
            .vip-card {
                background: url() no-repeat;
                background-size: 100% 100%;
            }
            .payment-icon {
                .m-r(@gap);
                width: 30px;
                height: 35px;
                .flex-column-center();
            }
            .payment-info {
                .flex-column();
                .payment-name {
                    .font-size();
                    color: @text-color;
                }
                .payment-balance {
                    .font-size-sm();
                    color: @red;
                    font-family: @font-family-number;
                }
            }
        }
    }
}
</style>
